<template>
	
	<view class="content">
		<view class="title">
			<image src="/static/index/camera.png" class="img-title"></image>
			<span class="titletext">照片墙</span>
		</view>
		
		<view class="guanlian" v-if="isNewParent">
			<text>您还没有关联宝贝，快去关联吧</text>
			<view class="tz" @click="toClass">
				前往关联
			</view>
		</view>
		
		<!-- 购买过的照片 -->
		<view class="pictureList" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img1':'img2'">
			
			<view>
				<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
			</view>
			<view class="suo-ys">
				<view class="suo style2">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
			
		</view>
		<!-- 未购买的照片 -->
		<view class="pictureList1" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img2':'img1'">
			
			<view>
				<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
			</view>
			<!-- <view class="suo-ys">
				<view class="suo" :class="pictureIdList.includes(item.id)? 'style2':'style1'">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view> -->
			<view class="suo-ys">
				<view class="suo" v-if="unlockIndex==0" :class="pictureIdList.includes(item.id)? 'style2':'style1'">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
				
				<view class="suo" v-if="unlockIndex==1" :class=" 'style2'">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
			
		</view>
		
		
		<view style="height: 150rpx;">
			<view-tabbar :current="0"> </view-tabbar>
		</view>
	</view>
</template>

<script>

	import tab from "@/components/parent-tabbar/parent-tabbar.vue"
	export default {

		data() {
			return {
				pictureList:[], //学生照片列表
				pictureIdList:[], //学生id列表
				studentId: null, //学生id
				parentId: null, //家长id
				teacherId: null, //老师id
				kgId: null,
				
				//是否解锁所有底片
				unlockIndex:0,
				userVxid: '',
				isNewParent: true,
				weChatShouQuan: false,
				codeInput: false //检查是否已输入编码
			}
		},

		components:{
			'view-tabbar': tab
		},

		// mounted() {
			
		// },
		
		onLoad: function (options) {
			// 先检查微信授权状态  
			this.checkWeChatAuthorization();
			// 检查是不是授权了但没有输入编码
			this.checkCode();
			// 检查身份（判断是老师还是家长）
			this.checkTeacherOrParent();
			uni.$on('photoUpdate',()=>{	
				this.getPictureList(this.studentId)
				this.getCheckPictureList(this.studentId,this.parentId)
				this.isUnlockAllPic()
				
			})
			
			//this.getParentIdAndStudentId()
			//下拉刷新
			setTimeout(function () {
				
			}, 1000);
			uni.startPullDownRefresh();
		},

		onPullDownRefresh() {
			
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
				uni.hideTabBar({
					animation: false
				})
			},
		
		methods: {
			//检查微信授权状态  
			checkWeChatAuthorization() {
				
				let userInfo = uni.getStorageSync("userInfo") //拿之前微信登录时存进去的 userinfo
				this.userVxid = userInfo.mpWeixinOpenId //根据 userinfo 拿到 微信id
				
				if(this.userVxid == null){ // 微信id不存在，说明未授权
					this.toLogin(); //跳转到微信登录页面
					
				}else{
					this.weChatShouQuan = true //把微信授权状态改为 true
					this.checkCode()
				}
			},
			//假设只进行了微信授权但没有输入编码
			checkCode(){
				if(this.weChatShouQuan){
					//kgId是从输入编码页面存进去的，如果kgId不存在
					//说明用户授权了但直接退出了，没有输入编码
					this.kgId  = uni.getStorageSync("kgId")
					console.log("this.kgId=================="+this.kgId)
					if(this.kgId === null || this.kgId === ''){
						uni.navigateTo({
							url:"/pages/input/input"
						})
					} else{
						this.codeInput = true
						this.checkTeacherOrParent()
					}
				}
			},
			//检查是家长还是老师
			checkTeacherOrParent(){
				
				if(this.codeInput){ //如果已授权且已输入编码
					//老师id是在 输入教师编码，并成功通过教师编码找到对应老师后才会存入缓存的
					//所以只要缓存中的 teacherId 不为空，就说明曾经一定通过教师编码拿到过对应教师
					this.teacherId = uni.getStorageSync("teacherId")
					if(this.teacherId === null || this.teacherId === ''){
						//为空说明不是老师，继续获取家长和学生id
						this.getParentIdAndStudentId();
					}else{
						//不为空说明是老师，跳转老师首页
						this.toTeacherIndex();
					}
				}
			},
			toTeacherIndex(){
				uni.switchTab({
					url:'/pages/teacher-index/teacher-index'
				})
			},
			getParentIdAndStudentId(){
				if(this.weChatShouQuan){ //如果已授权
					
					//微信id存在，则家长id一定存在，从缓存中获取家长id
					this.parentId =  uni.getStorageSync("parentId")
					
					//接下来判断该家长是否已关联学生
					this.getStudentId() //调用下面的方法根据家长id去 yry_student_parent 获取关联的学生
				}
			},
			getStudentId(){
				uni.$api.studentFindAllByParentId(this.parentId).then(result => {
					if(result[0]==null){
						this.isNewParent = true //则显示“您还没有关联宝贝”
						
					}else{
						this.isNewParent = false
						this.studentId = result[0].id //给studentid赋值（赋根据家长id拿到学生列表的第一个）
						
						this.getPictureList(this.studentId)
						this.getCheckPictureList(this.studentId,this.parentId)
						//是否解锁全底片
						this.isUnlockAllPic()
					}
				})

			},
			//是否解锁所有底片
			isUnlockAllPic(){
				uni.$api.isUnlockAllPic(this.studentId,this.parentId).then(result =>{	
					if(result > 0){
						//解锁所有
						this.unlockIndex = 1
					}else{
						//未解锁所有
						this.unlockIndex = 0
					}
				})
			},
			//跳转到选择关联学生页面（班级页面）
			toClass(){
				uni.redirectTo({
					url:"/pages/class/class"
				})
			},
			//跳转到登录页面
			toLogin(){
				uni.navigateTo({
					url:"/subpkg/commons/login/login"
				})
			},
			//获取照片列表
			getPictureList(studentId){
				uni.$api.appPictureFindByStudentId(studentId).then(result =>{
					this.pictureList = result
				})
			},
			//获取已选照片列表
			getCheckPictureList(studentId,parentId){
				uni.$api.appBillPicFindList(studentId,parentId).then(result =>{
					this.pictureIdList = result
				})
			},
			//点击预览图片
			showViewer(current){
				let picurl = []
				picurl.push(current.pictureUrl)
				let picId = current.id
				
				if((this.pictureIdList.includes(picId) && this.unlockIndex==0) ||this.unlockIndex==1){
					uni.previewImage({
						// urls:this.pictureList.map(v => v.pictureUrl),
						urls:picurl,
						//current: current.pictureUrl,
					})
				}else{
					uni.showModal({
						content:"订购本学期成长记忆服务，下载全部高清底片，现在就去订购吧。",
						success:function(res){
							if(res.confirm){
								
								uni.switchTab({
									url: '/pages/baby/baby'
								})
							}
							else if(res.cancel){
								
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.img-title{
		width: 30px;
		height: 30px;
		display: inline-block;
		vertical-align: middle;
		//padding-top: 30px;
	}
	.suo-ys{
		width: 45rpx;
		height: 20rpx;
	}
	.title{
		text-align: center;
	}
	.titletext{
		display: inline-block;
		line-height: 50px;
		padding-left: 10px;
		vertical-align: middle;
		color: #e3bb41;
		font-size: 20px;
		font-weight: bold;
	}
	.suo{
		width: 45rpx;
		height: 45rpx;
		position:relative;
		top:-200rpx;
		left: 25rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		padding-left: 8rpx;
	}
	.style1{
		display: block;
	}
	.style2{
		display: none;
	}
	.pictureList{
		width: 45%;
		display: inline-block;
		position: relative;
		margin-left: 25rpx;
		margin-top: 0rpx;
	}
	.pictureList1{
		width: 45%;
		display: inline-block;
		position: relative;
		margin-left: 25rpx;
	}
	.img1{
		display: inline-block;
		
	}
	.img2{
		display: none;
	}
	.img{
		/* widthFixs: 100%; */
		height: 210rpx;
		border-radius: 20rpx;
	}
	.img-suo{
		width: 30rpx;
		height: 30rpx;
	}
	.guanlian{
		width: 750rpx;
	}
	.guanlian text{
		position: absolute;
		left: 50%;
		bottom: 400rpx;
		transform: translate(-50%, 0);
		font-size: 25rpx;
	}
	.tz{
		position: absolute;
		bottom: 280rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #F5BF46;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 45rpx;
		text-align: center;
	}
</style>
